<!--  -->
<template>
    <el-row
      v-for="item of components"
      :gutter="60"
    >
      <el-col
        v-for="comp of item"
        :span="5"
      >
        <el-card
          class="rounded-15px"
          :style="comp.style"
        >
          <component :is="comp.components" />
        </el-card>
      </el-col>
    </el-row>
</template>

<script setup lang="ts">
import {} from 'vue';
import { debounce, string, array, test } from './components';
const components = [
  [
    {
      span: 5,
      components: debounce,
      style: {
        height: '300px',
      }
    },
    {
      span: 5,
      components: string,
      style: {
        height: '300px',
      }
    },
    {
      span: 5,
      components: array,
      style: {
        height: '300px',
      }
    },
    {
      span: 5,
      components: test,
      style: {
        height: '300px',
      }
    }
  ],
  []
];
</script>

<style lang="scss" scoped>

</style>
